<template>
	<view class="password-container">
		<view class="form-card">
			<view class="form-item">
				<text class="form-label">旧密码</text>
				<input 
					class="form-input" 
					type="password" 
					v-model="passwordForm.oldPassword" 
					placeholder="请输入旧密码"
					:password="true"
				/>
			</view>
			<view class="form-item">
				<text class="form-label">新密码</text>
				<input 
					class="form-input" 
					type="password" 
					v-model="passwordForm.newPassword" 
					placeholder="请输入新密码（至少6位）"
					:password="true"
				/>
			</view>
			<view class="form-item">
				<text class="form-label">确认密码</text>
				<input 
					class="form-input" 
					type="password" 
					v-model="passwordForm.confirmPassword" 
					placeholder="请再次输入新密码"
					:password="true"
				/>
			</view>
		</view>
		
		<view class="submit-section">
			<view class="submit-btn" @click="submitPassword" :class="{ 'disabled': isSubmittingPassword }">
				<text class="btn-text">{{ isSubmittingPassword ? '提交中...' : '确定' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import api, { handleApiError } from '@/utils/api.js'

export default {
	data() {
		return {
			passwordForm: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			isSubmittingPassword: false
		}
	},
	methods: {
		async submitPassword() {
			// 防止重复提交
			if (this.isSubmittingPassword) {
				return;
			}
			
			// 验证表单
			if (!this.passwordForm.oldPassword) {
				uni.showToast({
					title: '请输入旧密码',
					icon: 'none'
				});
				return;
			}
			if (!this.passwordForm.newPassword) {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				});
				return;
			}
			if (this.passwordForm.newPassword.length < 6) {
				uni.showToast({
					title: '新密码长度不能少于6位',
					icon: 'none'
				});
				return;
			}
			if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
				uni.showToast({
					title: '两次输入的新密码不一致',
					icon: 'none'
				});
				return;
			}
			
			this.isSubmittingPassword = true;
			uni.showLoading({
				title: '修改中...',
				mask: true
			});
			
			try {
				const response = await api.updatePassword(
					this.passwordForm.oldPassword,
					this.passwordForm.newPassword
				);
				
				uni.hideLoading();
				this.isSubmittingPassword = false;
				
				if (response && response.code === 200) {
					uni.showToast({
						title: '密码修改成功',
						icon: 'success',
						duration: 2000
					});
					
					// 延迟退出登录，让用户看到成功提示
					setTimeout(() => {
						uni.showModal({
							title: '提示',
							content: '密码已修改，请重新登录',
							showCancel: false,
							success: () => {
								// 使用统一的登出工具
								import('@/utils/auth.js').then(({ logout }) => {
									logout();
								});
							}
						});
					}, 2000);
				} else {
					uni.showToast({
						title: response.msg || '修改密码失败',
						icon: 'none',
						duration: 2000
					});
				}
			} catch (error) {
				uni.hideLoading();
				this.isSubmittingPassword = false;
				console.error('修改密码错误:', error);
				handleApiError(error);
			}
		}
	}
}
</script>

<style scoped>
.password-container {
	padding: 30rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
}

.form-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.form-item {
	margin-bottom: 40rpx;
}

.form-item:last-child {
	margin-bottom: 0;
}

.form-label {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	display: block;
	margin-bottom: 15rpx;
}

.form-input {
	width: 100%;
	height: 80rpx;
	padding: 0 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
	transition: all 0.3s ease;
	background: #fff;
}

.form-input:focus {
	border-color: #2870E5;
	outline: none;
}

.submit-section {
	margin-top: 40rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: #2870E5;
	color: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: 0 4rpx 16rpx rgba(40, 112, 229, 0.3);
}

.submit-btn:active {
	background: #1e5bb8;
	transform: scale(0.98);
}

.submit-btn.disabled {
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

.submit-btn.disabled:active {
	transform: none;
}

.btn-text {
	font-weight: 600;
}
</style>

